<template>
  <div class="main_container">
    <!-- 导航栏 -->
    <!-- <banner></banner> -->
    <banner class="banner_box"
            v-on:routerPath="routerPath"
            v-bind:toActiveIndex="bannerActiveIndex"></banner>

    <router-view @getRouterPathFromHome="setBannerPath"
                 v-on:toUserId="toUserId"
                 v-on:toContactName="toContactName" />

    <!-- <img src="../../assets/img/b1.jpg"
         class="img_box" /> -->

    <!-- 右边侧边栏的三个小按钮 -->
    <div class="btn_right">
      <div>
        <el-button icon="el-icon-plus"
                   size="medium "
                   @click="add()"
                   circle></el-button>
      </div>
      <div>
        <el-button icon="el-icon-search"
                   size="medium "
                   @click="search()"
                   circle></el-button>
      </div>
      <div class="message_box">
        <el-button icon="el-icon-s-comment"
                   size="medium"
                   @click="message()"
                   circle></el-button>
        <div class="noRead_box">
          <p>{{noReadMsg}}</p>
        </div>
      </div>
    </div>

    <!-- 发布信息对话框 -->
    <el-dialog title="信息发布"
               :visible.sync="dialogVisible"
               width="50%">
      <add-type v-on:closeDialog="closeDialog"></add-type>

    </el-dialog>

    <!-- 聊天的抽屉 -->
    <el-drawer :title="contactName"
               class="drawer_box"
               :visible.sync="drawer"
               :direction="direction"
               size="35%">
      <div class="chat_box">

        <div class="msg_box">
          <msg-list class="list_box"
                    ref="msg_list"
                    :toMsgInfo.sync="msgInfo"></msg-list>
        </div>

        <div class="send_msg_box">
          <el-input type="textarea"
                    :rows="3"
                    v-model="msgInfo.msg"
                    placeholder="请输入内容">
          </el-input>
          <el-button size="small"
                     @click="sendMsg(msgInfo)"
                     class="btn">发送</el-button>
        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { getAllCategory } from "../../api/http.js";
import MsgList from '../../components/msg/MsgList'
export default {
  components: {
    'msg-list': MsgList
  },
  created () {
    this.normalMsgInfo.userId = window.sessionStorage.getItem("userId")
    this.msgInfo.userId = window.sessionStorage.getItem("userId")
    let nowHref = window.location.href
    let hrefs = nowHref.split('/')
    let routerPath = '/' + hrefs[hrefs.length - 1];
    this.setBannerPath(routerPath)
    //  this.getAllCategory();
    this.sendMsg(this.normalMsgInfo)
  },
  data () {
    return {
      bannerActiveIndex: '1', // 导航栏默认激活第几个
      dialogVisible: false,   // 是否打开对话框内
      categoryList: {}, // 分类列表
      drawer: false, // 是否打开抽屉
      direction: 'rtl', // 抽屉方向
      contactName: '1111', // 消息接受者名称
      msgInfo: { // 消息
        msg: '12345',
        sendId: '10086',
        receiveId: '10010'
      },
      normalMsgInfo: {  // 测试连接websocket消息
        msg: '测试链接的消息',
        sendId: '10086',
        receiveId: ''
      },
      noReadMsg: '99+'  // 未读消息数
    }
  },
  methods: {
    // 接收子组件导航栏传递过来的路由路径，进行路由跳转
    routerPath (path) {
      this.$router.push(path);
    },
    // 修改导航栏激活第几个
    setBannerPath (routerPath) {
      console.log(routerPath)
      if (routerPath == '/home')
        this.bannerActiveIndex = '1'
      if (routerPath == '/pair')
        this.bannerActiveIndex = '2'
      if (routerPath == '/wantAdopt')
        this.bannerActiveIndex = '3'
      if (routerPath == '/loveAdopt')
        this.bannerActiveIndex = '4'
      if (routerPath == '/lostFind')
        this.bannerActiveIndex = '5'
    },
    // 添加按钮
    add () {
      console.log("add")
      this.dialogVisible = true
    },
    // 搜索
    search () {
      console.log("search")
    },
    // 消息
    message () {
      console.log("message")
    },
    // 关闭对话框或者抽屉
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 获取所有分类信息
    async getAllCategory () {
      const { data: res } = await getAllCategory();
      console.log(res.data)
      this.categoryList = res.data
    },
    // 关闭对话框
    closeDialog (val) {
      console.log(val)
      this.dialogVisible = val
    },
    // 获取到子组件的消息接收者id
    toUserId (userId) {
      console.log(userId)
      this.drawer = true
      this.msgInfo.receiveId = userId
    },
    // 获取子组件传递的消息接收者名称
    toContactName (name) {
      console.log(name)
      this.contactName = name
      console.log(this.contactName)
    },
    // 发送消息
    async sendMsg (msgInfo) {
      this.msgInfo.sendId = window.sessionStorage.getItem("userId")
      this.socketApi.sendSock(msgInfo, this.getConfigResult)
      this.$refs.msg_list.getMsgInfoList(this.msgInfo)
    },
    //  接收消息的回调
    getConfigResult (res) {
      console.log("收到消息" + res)
      this.$refs.msg_list.getMsgInfoList(this.msgInfo)
    }

  }
}
</script>
<style lang="less" scoped>
.main_container {
  width: 100%;
  background-color: rgba(197, 238, 130, 0.342);
  //   background: url("../../assets/img/b1.jpg") no-repeat;
  //   导航栏
  .banner_box {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 5;
    padding-bottom: 20px;
  }
  // 右边侧边栏的三个外部div布局样式
  .btn_right {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 5;
    transform: translate(-50%, -50%);
    //  三个小按钮样式
    .el-button {
      margin-bottom: 10px;
      background-color: rgb(238, 130, 238);
      border: 0;
      color: white;
    }
    //  消息按钮样式
    .message_box {
      position: relative;
      .noRead_box {
        position: absolute;
        top: 0;
        right: 0;
        height: 15px;
        width: 25px;
        background-color: red;
        transform: translate(50%, -50%);
        color: white;
        border-radius: 40%;
        text-align: center;
        p {
          margin: 0;
          font-size: 9px;
        }
      }
    }
  }

  //   对话框
  .el-dialog {
    height: 50%;
    overflow: auto;
  }
  //   抽屉
  .drawer_box {
    //   聊天对话框
    .chat_box {
      height: 95%;
      width: 90%;
      margin-left: 20px;
      box-sizing: border-box;
      position: relative;
      // 消息框
      .msg_box {
        border: 1px solid rgb(209, 203, 203);
        background-color: rgb(207, 207, 207);
        width: 100%;
        height: 420px;
        overflow: auto;
        //   消息列表
        .list_box {
          height: 100%;
          margin-left: 10px;
          padding-right: 10px;
        }
      }

      // 发送消息对话框
      .send_msg_box {
        width: 100%;
        height: 20%;
        position: absolute;
        bottom: 0;
        overflow: hidden;
      }
      // 发送按钮
      .btn {
        background-color: violet;
        position: absolute;
        color: white;
        right: 0;
        bottom: 0;
        transform: translate(0, 0);
      }
    }
  }
}

.img_box {
  z-index: 555;
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50%;
  padding-bottom: 20px;
  transform: translate(0, -50%);
}
</style>